<template>
    <div>
        <!--导航栏-->
        <Nav></Nav>
        <div style="height: 600px" class="main_content">

            <!--main-->
            <div style="padding: 20px;width: 75%;height: 550px;background-color: #ffffff;margin-left: 190px;margin-top: 20px;border-radius: 20px; box-shadow: 2px 2px 15px 1px #999999;">
                <!--个人订单界面-->
                <div>
                    <h2>我的订单</h2>
                </div>
                <el-divider></el-divider>
                <el-table style="font-size: 10px" stripe :data="tableData">
                    <el-table-column width="120" label="订单名称" prop="name"/>
                    <el-table-column width="180" label="订单编号" prop="orderId"/>
                    <el-table-column width="100" label="入住人" prop="checkName"/>
                    <el-table-column width="100" label="房间号" prop="roomId" :formatter="stateFormat"/>
                    <el-table-column label="支付宝订单号" prop="alipayNo" :formatter="stateFormat1"/>
                    <el-table-column width="60" label="总价格" prop="total"/>
                    <el-table-column label="创建时间" prop="createTime"/>
                    <el-table-column label="支付时间" :formatter="stateFormat2" prop="payTime"/>
                    <el-table-column label="订单状态" :formatter="stateFormat3" prop="state"/>
                    <el-table-column label="操作">
                        <template v-slot="scope">
                            <el-button @click="pay(scope.row)" type="primary" size="small" :disabled="scope.row.state">
                                支付
                            </el-button>
                            <el-button @click="handleDelete(scope.row.id)" type="danger" size="small"
                                       :disabled="scope.row.state">取消
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    import Footer from '../components/Footer'
    import Nav from '../components/Nav'

    const baseUrl = "http://localhost:8088"
    export default {
        name: 'Orders',
        data() {
            return {
                tableData: [],
            }
        },
        components: {
            Nav,
            Footer
        },
        created() {
            this.load()
        },
        methods: {
            /*房间更新数值*/
            stateFormat(row, column) {
                if (row.roomId == null) {
                    return '支付后更新！'
                } else {
                    return row.roomId
                }
            },
            /*支付宝订单号*/
            stateFormat1(row, column) {
                if (row.alipayNo == null) {
                    return '支付后更新！'
                } else {
                    return row.alipayNo
                }
            },
            /*支付时间*/
            stateFormat2(row, column) {
                if (row.payTime == null) {
                    return '支付后更新！'
                } else {
                    return row.payTime
                }
            },
            /*订单状态*/
            stateFormat3(row, column) {
                if (row.state == null) {
                    return '未支付'
                } else {
                    return row.state
                }
            },

            load() {
                fetch(baseUrl + '/api/orders').then(res => res.json()).then(res => {
                    this.tableData = res
                    console.log(res)
                })
            },
            pay(row) {
                fetch(baseUrl + '/alipay/notify').then(res => res.json()).then(res => {
                    alert("订单支付成功！")
                    console.log(res)
                }),
                window.open("http://localhost:8088/alipay/pay?subject=" + row.name + "&traceNo=" + row.orderId + "&totalAmount=" + row.total)
                this.$message.success("请求支付宝成功")
            },
            /*删除订单*/
            handleDelete(id) {
                let _this = this
                if (window.confirm('确定要删除该订单吗？')) {
                    // 发送axios请求，根据查询一个
                    this.$axios.post("http://localhost:8088/orders/deletedById/" + id).then(function () {
                        _this.load();
                        _this.$message({
                            showClose: true,
                            message: '订单删除成功!',
                            type: 'success'
                        });
                    }).catch(function (err) {
                        _this.$message({
                            showClose: true,
                            message: '订单删除失败!请联系管理员！',
                            type: 'error'
                        });
                    })
                }
            },
        }
    }
</script>

<style scoped>
    .main_content {
        float: left;
        width: 100%;
    }


</style>
